<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 表格</title>
    <style>
        .biaoge {
            width:50%;
            border:1px solid #aaaaaa;
            border-collapse:collapse;
            margin:0 auto;
            text-align:center
        }
        .over {
            background-color: #d6d6d6
        }
    </style>
    <script src="../jQuery/jquery-1.12.4.min%20(2).js"></script>
    <script src="../js/ChuanKou.js"></script>
    <script>
        //生成表格
        var students = [
            ["张三","0","21","../img/ad1.jpg"],
            ["李四","0","22","../img/ad2.jpg"],
            ["王五","0","23","../img/ad3.jpg"],
            ["赵六","0","24","../img/ad4.jpg"]
        ];
        /*  window.onload = function(){
         var _div =  document.createElement("div");
         document.body.appendChild(_div);


         for (var i= 0; i<friends.length;i++){
         var arr = friends[i];
         //应该在表格建立tr
         for (var j= 0; j<arr.length;j++){
         //在这里建立td元素
         }
         document.getElementsByClassName("tr").appendChild(friends[i]);
         }
         };*/
        //生成表格的方法

        var grid = function(title, col, data) {
            //表格的标题
            var p = document.createElement('p');
            p.textContent = title;
            p.style.textAlign = "center";
            document.body.appendChild(p);

            //表格部分
            var g = document.createElement('table');
            g.border = 1;
            g.style.margin = '0 auto';
            g.style.width = '80%';
            g.style.border = '1px solid gary';
            g.style.borderCollapse = 'collapse';
            document.body.appendChild(g);

            //表格的列头
            var tr = document.createElement('tr');
            g.appendChild(tr);
            for (var i = 0; i < col.length; i++) {
                var th = document.createElement('th');
                th.style.width = '25%';
                th.textContent = col[i];
                tr.appendChild(th);
            }

            //表格数据展示
            for (var i = 0; i < data.length; i++) {
                //新建tr元素
                var tr = document.createElement('tr');
                g.appendChild(tr);

                //填充表格的数据展示
                var arr = data[i];//['张三', '0', 21, '../../xx1.png']
                for (var j = 0; j < arr.length; j++) {
                    var td = document.createElement('td');
                    //第2列
                    if (1 == j) {
                        //为0给td设置男, 1设置女
                        if (0 == arr[j]) {
                            td.textContent = '男';
                        } else if (1 == arr[j]) {
                            td.textContent = '女';
                        }
                    } else if (3 == j) {//第4列
                        td.style.cursor = 'pointer';
                        td.textContent = '查看';
                        td.setAttribute('path', arr[j]);//设置属性 属性名称 - 属性内容
                        td.onclick = function() {
                            //生成图片对象并且指定图片地址
                            var img = document.createElement('img');
                            img.src = this.getAttribute('path');//访问属性
                            img.style.width = 280 + 'px';
                            img.style.height = 180 + 'px';
                            //调用窗口方法,将图片对象传递给窗口
                            win(300, 240, '大头照', img);
                        };
                    } else {
                        //非第2列
                        td.textContent = arr[j];
                    }

                    tr.appendChild(td);
                }
            }
        };


        window.onload = function() {
            grid('花名册', ['姓名', '性别', '年龄', '照片'], students);
        };

    </script>
    <script>
       //先写一个数组
        //然后用jquery(function($)){  在这里面开始写}
        //然后写表头
        //再写表格
       var students = [
           {name: "张三", sex: 0, age: "21", img: "../img/ad1.jpg"},
           {name: "李四", sex: 1, age: "22", img: "../img/ad2.jpg"},
           {name: "王五", sex: 0, age: "23", img: "../img/ad3.jpg"},
           {name: "赵六", sex: 1, age: "24", img: "../img/ad4.jpg"}
       ];
       jQuery(function ($) {
           //body的jq对象
           var $body = $('body');
           //然后写标题栏 表头 创建一个P标签 然后把它加到body当中
           $('<p></p>').appendTo($body).css({textAlign:'center',margin:'10px auto'}).text('花名册');
           //开始写表格 创建一个表格标签 然后把它放到body中 可以直接在里面写命名和一些样式
           var $table = $('<table class="biaoge" border="1px"></table>').appendTo($body);
           //表格头
           var $tr = $('<tr></tr>').appendTo($table).css({backgroundColor:'#C9C9C9'});
            $('<th></th>').appendTo($tr).html('<input id = "chkAll" type = "checkbox" />');
            $('<th></th>').appendTo($tr).text('姓名');
            $('<th></th>').appendTo($tr).text('性别');
            $('<th></th>').appendTo($tr).text('年龄');
            $('<th></th>').appendTo($tr).text('头像');
            //写一个for循环遍历数组
           for(var i=0;i<students.length;i++){
               //创建一个tr放到table中
               var _tr = $('<tr></tr>').appendTo($table);
               //根据数组 写单元格 把单元格丢到tr中
               //复选框
               $('<td></td>').appendTo(_tr).html('<input id = "chkAll" type = "checkbox" />');
               //名字
               $('<td></td>').appendTo(_tr).text(students[i]['name']);
               //关于性别 用的三元运算符
               $('<td></td>').appendTo(_tr).text((0 === students[i]['sex']) ? '女' : '男');
               //年龄
               $('<td></td>').appendTo(_tr).text(students[i]['age']);
               //头像查看
               $('<td></td>').appendTo(_tr).html('<a target = "_blank" href = "' + students[i]['img'] + '">查看</a>');
           }
           //鼠标样式
           var tr_all = $('tr:gt(0)', $table);
           tr_all.mouseover(function() {
               tr_all.removeClass('over');
               $(this).addClass('over');
           });

           //全选功能
           $('#chkAll').click(function() {
               $(':checkbox:gt(0)').prop({checked:this.checked});
           });
       })
    </script>
</head>
<body>
<div>
</div>

</body>
</html>